<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <p>
    Edit <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
</template>

<script>
export default {
  name: "HelloWorld",

  props: {
    msg: String,
  },
  
  emits: ["onSayHello"],

  // vue2中的选项
  // vue2中每个vue实例的选项（options）包括：data,computed,watch,methods,8大生命周期...
  // vue2对组件的定义使用的是options-API 选项式API
  data() {
    return {
      count: 0,
    };
  },

  // 组合式API（composition-API）入口
  /* 相当于beforeCreate + created */
  // 接收两个入参(props+context) props 为父组件传递过来的props
  // context类似于组件实例(this) attrs,slots,emit函数,expose函数...
  setup(props, { emit }) {
    // 组件实例已经被创建
    emit("onSayHello", "vue3");
  },
  
};
</script>
